<%@ page contentType="text/html;charset=UTF-8" %>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="main"/>
    <title>Live Chat</title>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'coverlive/coverlive.css')}"/>
</head>
<body>
<div class="cover-live-comment-outer">
    <g:each in="${chats}" var="chat">
        <g:render template="/coverlive/liveComment" model="${[liveComment: chat]}"/>
    </g:each>
</div>

<g:textArea name="comment"/>
<g:submitButton name="update" value="Update"/>

<g:javascript>
    $("#update").click(function() {

        var data = "comment="+$('#comment').val();
        $.ajax({
            type: "POST",
            url: "/recipeexchange/coverlive/add",
            data: data,
            success: function(msg) {
                $('.comment-outter').append(msg);
            }
        });
    });
</g:javascript>

</body>